<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
				padding: 0;
				margin: 0;
			}
            .center{
				width: 800px;
				height: 800px;
				background: #0000FF;
				position: relative;
			}
			.dialog {
				width: 250px;
				height: 250px;
				position: absolute;
				background-color: #ccc;
				-webkit-box-shadow: 1px 1px 3px #292929;
				-moz-box-shadow: 1px 1px 3px #292929;
				box-shadow: 1px 1px 3px #292929;
				margin: 10px;
			}

			.dialog2 {
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: #ccc;
				-webkit-box-shadow: 1px 1px 3px #292929;
				-moz-box-shadow: 1px 1px 3px #292929;
				box-shadow: 1px 1px 3px #292929;
				margin: 10px;
			}

			.dialog-title {
				color: #fff;
				background-color: #404040;
				font-size: 12pt;
				font-weight: bold;
				padding: 4px 6px;
				cursor: move;
			}

			.dialog-content {
				padding: 4px;
			}
		</style>
	</head>
	<body>
		<div class="center">
			<div id="dlgTest" class="dialog">
				<div class="dialog-title">Dialog</div>
				<div class="dialog-content">
					This is a draggable test.
				</div>
			</div>
			<div id="dlgTest2" class="dialog2">
				<div class="dialog-title">Dialog</div>
				<div class="dialog-content">
					This is a draggable test.
				</div>
			</div>
			<div id="dlgTest2" class="dialog2 dialog-title">
			</div>
		</div>

		<script type="text/javascript">
			var Dragging = function(validateHandler) { //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
				var draggingObj = null; //dragging Dialog
				var diffX = 0;
				var diffY = 0;

				function mouseHandler(e) {
					switch (e.type) {
						case 'mousedown':
							draggingObj = validateHandler(e); //验证是否为可点击移动区域
							if (draggingObj != null) {
								diffX = e.clientX - draggingObj.offsetLeft;
								diffY = e.clientY - draggingObj.offsetTop;
							}
							break;

						case 'mousemove':
							if (draggingObj) {
								draggingObj.style.left = (e.clientX - diffX) + 'px';
								draggingObj.style.top = (e.clientY - diffY) + 'px';
							}
							break;

						case 'mouseup':
							draggingObj = null;
							diffX = 0;
							diffY = 0;
							break;
					}
				};

				return {
					enable: function() {
						document.addEventListener('mousedown', mouseHandler);
						document.addEventListener('mousemove', mouseHandler);
						document.addEventListener('mouseup', mouseHandler);
					},
					disable: function() {
						document.removeEventListener('mousedown', mouseHandler);
						document.removeEventListener('mousemove', mouseHandler);
						document.removeEventListener('mouseup', mouseHandler);
					}
				}
			}

			function getDraggingDialog(e) {debugger;
				var target = e.target;
				while (target && target.className.indexOf('dialog-title') == -1) {
					target = target;
				}
				if (target != null) {
					return target;
				} else {
					return null;
				}
			}
			Dragging(getDraggingDialog).enable();
		</script>
	</body>
</html>
